<template>
    <div>
        <el-table :data="menuList" border>
            <el-table-column type="index" :index="indexMethod" min-width="30" label="编号" align="center" />
            <el-table-column label="菜单名称" prop="menuName" align="center">
            </el-table-column>
            <el-table-column label="菜单Url" prop="menuURL" align="center">
            </el-table-column>
            <el-table-column label="父级菜单名称" prop="menuParentName" align="center">
            </el-table-column>
            <el-table-column label="创建人" prop="createBy" align="center"></el-table-column>
            <el-table-column label="创建日期" prop="createDate" align="center">
                <template #default="scope">
                    {{ scope.row.createDate.substr(0, 10) + " " + scope.row.createDate.substr(11, 8) }}
                </template>
            </el-table-column>
            <el-table-column label="修改人" prop="updateBy" align="center"></el-table-column>
            <el-table-column label="修改日期" prop="updateDate" align="center">
                <template #default="scope">
                    {{ scope.row.updateDate ? scope.row.updateDate.substring(0, 19).split("T")[0] + " "
                        + scope.row.updateDate.substring(0, 19).split("T")[1] : "" }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center">
                <template #default="scope">
                    <el-link @click="updateMenuInfo(scope.row.menuId)">修改</el-link>
                    &ensp;|&ensp;
                    <el-link @click="deleteMenuInfo(scope.row.menuId)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <table style="margin: 10px auto;">
            <tr>
                <td>
                    <el-pagination v-model:current-page="page.index" v-model:page-size="page.size"
                        :page-sizes="[15, 20, 25]" layout="slot, sizes" :total="page.totalCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        共 {{ page.totalCount }} 条，共 {{ page.pageCount }} 页，当前 {{ page.index }} / {{ page.pageCount }} 页
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.index" v-model:page-size="page.size"
                        :page-sizes="[15, 20, 25]" layout="slot, prev, pager, next" :total="page.totalCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                        next-text="下一页">
                        <el-button :disabled="page.index == 1" @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.index" v-model:page-size="page.size"
                        :page-sizes="[15, 20, 25]" layout="slot, jumper" :total="page.totalCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        <el-button :disabled="page.index == page.pageCount"
                            @click="handleCurrentChange(page.pageCount)">尾页</el-button>
                    </el-pagination>
                </td>
            </tr>
        </table>
        <!-- 删除子级菜单 -->
        <el-dialog v-model="dialogVisible" width="500">
            <template #header>
                <span style="font-size: 16px;font-weight: bolder;">该菜单含有子级菜单，是否全部删除？</span>
            </template>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="deleteMenuChildren()">是</el-button>
                    <el-button @click="dialogVisible = false">
                        否
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, inject } from 'vue'

import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElTree } from 'element-plus'

import http from '@/http'
const router = useRouter()

const page = reactive({
    size: 15,
    index: 1,
    totalCount: 0,
    pageCount: 0
})

const menuList = ref([])

// 序号
const indexMethod = (index: number) => {
    return index += (page.size) * (page.index - 1) + 1;
}

// 分页事件（改变页容量、改变页索引）
const handleSizeChange = (val: number) => {
    page.size = val;
    getMenuList();
}
const handleCurrentChange = (val: number) => {
    page.index = val;
    getMenuList();
}

// 获取菜单列表
const getMenuList = () => {
    http.get("/api/Menu/GetPage", {
        params: {
            size: page.size,
            index: page.index
        }
    }).then(res => {
        menuList.value = res.data.datas;
        page.totalCount = res.data.totalCount;
        page.pageCount = res.data.pageCount;
    })
}

// 修改菜单信息
const updateMenuInfo = (menuId: number) => {
    router.push('/menuUpdateInfo?menuId=' + menuId);
}

// 包含子项菜单弹框显示
const menuIdByDelete = ref(0)
const dialogVisible = ref(false)
// 删除菜单信息
const deleteMenuInfo = (menuId: number) => {
    ElMessageBox.confirm(
        '确定要删除吗？',
        '提示信息',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            http.delete("/api/Menu/DeleteMenuInfo?menuId=" + menuId).then(res => {
                if (res.data > 0) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                        duration: 500
                    });
                    getMenuList();
                }
                else if (res.data == -1) {
                    menuIdByDelete.value = menuId;
                    dialogVisible.value = true;
                }
                else {
                    ElMessage({
                        type: 'error',
                        message: '删除失败',
                        duration: 500
                    })
                }
            })
        })
}

// 删除含子项菜单的菜单
const deleteMenuChildren = () => {
    http.delete("/api/Menu/DeleteMenu?menuId=" + menuIdByDelete.value).then(res => {
        if (res.data > 0) {
            ElMessage({
                type: 'success',
                message: '删除成功',
                duration: 500
            });
            dialogVisible.value = false;
            getMenuList();
        }
        else {
            ElMessage({
                type: 'error',
                message: '删除失败',
                duration: 500
            })
        }
    })
}

onMounted(() => {
    getMenuList();
})
</script>

<style scoped></style>